<template>
  <div class="real-time-monitoring bg-background text-foreground">
    <h3 class="text-2xl font-bold mb-4">公用工程实时在线监测</h3>

    <div class="flex justify-between mb-4">
      <button class="bg-accent text-accent-foreground px-4 py-2 rounded-md hover:bg-accent/80">导入</button>
      <button class="bg-secondary text-secondary-foreground px-4 py-2 rounded-md hover:bg-secondary/80">导出</button>
    </div>
    <table class="w-full border-collapse bg-card text-card-foreground">
      <thead>
        <tr class="bg-muted">
          <th class="border border-border px-4 py-2">公用工程类型</th>
          <th class="border border-border px-4 py-2">监测参数</th>
          <th class="border border-border px-4 py-2">单位</th>
          <th class="border border-border px-4 py-2">实时数据</th>
          <th class="border border-border px-4 py-2">安全范围值范围</th>
          <th class="border border-border px-4 py-2">状态</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(category, index) in utilityData" :key="index">
          <tr v-for="(item, itemIndex) in category.items" :key="`${index}-${itemIndex}`">
            <td v-if="itemIndex === 0" :rowspan="category.items.length" class="border border-border px-4 py-2">
              {{ category.name }}
            </td>
            <td class="border border-border px-4 py-2">{{ item.parameter }}</td>
            <td class="border border-border px-4 py-2">{{ item.unit }}</td>
            <td class="border border-border px-4 py-2">{{ item.realTimeData }}</td>
            <td class="border border-border px-4 py-2">{{ item.safeRange }}</td>
            <td class="border border-border px-4 py-2">
              <span :class="getStatusClass(item.status)">{{ item.status }}</span>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const utilityData = ref([
  {
    name: '水（清水）',
    items: [
      { parameter: '流量', unit: 'L/s', realTimeData: '2.000', safeRange: '0 ~ 5.000', status: '正常' },
      { parameter: '压力', unit: 'kPa', realTimeData: '300', safeRange: '200 ~ 400', status: '正常' },
      { parameter: 'pH值', unit: '', realTimeData: '7.2', safeRange: '6.5 ~ 8.5', status: '正常' },
      { parameter: '浊度', unit: 'NTU', realTimeData: '3', safeRange: '0 ~ 5', status: '正常' },
    ]
  },
  {
    name: '水（污水）',
    items: [
      { parameter: 'COD', unit: 'mg/L', realTimeData: '50', safeRange: '< 100', status: '正常' },
      { parameter: 'BOD去除率', unit: '%', realTimeData: '95', safeRange: '> 90', status: '高效' },
    ]
  },
  {
    name: '电力',
    items: [
      { parameter: '电流', unit: 'V', realTimeData: '380', safeRange: '360 ~ 420', status: '正常' },
      { parameter: '电压', unit: 'A', realTimeData: '50', safeRange: '变动范围内', status: '正常' },
      { parameter: '功率', unit: 'MW', realTimeData: '30', safeRange: '设定容量内', status: '正常' },
      { parameter: '总谐波失真（THD）', unit: '%', realTimeData: '< 5', safeRange: '< 8', status: '良好' },
    ]
  },
  {
    name: '天然气',
    items: [
      { parameter: '管道压力', unit: 'MPa', realTimeData: '-', safeRange: '设定安全范围内', status: '-' },
      { parameter: '流量', unit: 'm³/h', realTimeData: '-', safeRange: '设定范围内', status: '-' },
      { parameter: '甲烷浓度', unit: 'ppm', realTimeData: '-', safeRange: '< 警报标准', status: '-' },
    ]
  },
  {
    name: '热能（供暖）',
    items: [
      { parameter: '进水温度', unit: '°C', realTimeData: '70 ~ 90', safeRange: '变动范围内', status: '正常' },
      { parameter: '回水温度', unit: '°C', realTimeData: '50 ~ 70', safeRange: '设定容量内', status: '正常' },
      { parameter: '流量', unit: 'GJ/h', realTimeData: '设定范围内', safeRange: '< 8', status: '正常' },
      { parameter: '工作压力', unit: 'MPa', realTimeData: '1.6', safeRange: '1.5 ~ 2.0', status: '正常' },
    ]
  },
])

const getStatusClass = (status) => {
  switch (status) {
    case '正常':
      return 'text-green-500'
    case '高效':
      return 'text-blue-500'
    case '良好':
      return 'text-teal-500'
    default:
      return 'text-gray-500'
  }
}
</script>

<style scoped>
/* Remove any existing styles */
</style>
